<!doctype html>
<html>
  <head>
    <title>xterm.js demo</title>
    <link rel="stylesheet" href="/build/xterm.css" />
    <link rel="stylesheet" href="/build/addons/fullscreen/fullscreen.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
  </head>
  <body>
    <h1 style="color: #2D2E2C">xterm.js: A terminal for the <em style="color: #5DA5D5">web</em></h1>
    <div id="terminal-container"></div>
    <div>
      <h3>Actions</h3>
      <p>
        <label>Find next <input id="find-next"/></label>
        <label>Find previous <input id="find-previous"/></label>
        <label>Use regex<input type="checkbox" id="regex"/></label> 
        <label>Case sensitive<input type="checkbox" id="case-sensitive"/></label>
        <label>Whole word<input type="checkbox" id="whole-word"/></label>
      </p>
    </div>
    <div>
      <h3>Options</h3>
      <p>These options can be set in the <code>Terminal</code> constructor or using the <code>Terminal.setOption</code> function.</p>
      <div id="options-container"></div>
    </div>
    <div>
      <h3>Style</h3>
      <div style="display: inline-block; margin-right: 16px;">
        <label for="padding">Padding</label>
        <input type="number" id="padding" />
      </div>
    </div>
    <hr/>
    <p><strong>Attention:</strong> The demo is a barebones implementation and is designed for the development and evaluation of xterm.js only. Exposing the demo to the public as is would introduce security risks for the host.</p>
    <button id="dispose" title="This is used to testing memory leaks">Dispose terminal</button>
    <script src="dist/client-bundle.js" defer ></script>
  </body>
</html>
